Böngészőbővítmények fejlesztése: Navigálás a Manifest V3 és a JavaScript API-k világában

A böngészőbővítmények hatékony módot kínálnak a böngészési élmény javítására és testreszabására. Lehetővé teszik a fejlesztők számára, hogy funkcionalitást adjanak a webböngészőkhöz, interakcióba lépjenek a weboldalakkal, és integrálódjanak a webszolgáltatásokkal. Ez az útmutató átfogó áttekintést nyújt a böngészőbővítmények fejlesztéséről, a Manifest V3-ra és az ezeket a bővítményeket működtető alapvető JavaScript API-kra összpontosítva.

A böngészőbővítmények megértése

A böngészőbővítmény egy kis szoftverprogram, amely kiterjeszti egy webböngésző funkcionalitását. A bővítmények módosíthatják a weboldalakat, új funkciókat adhatnak hozzá, és integrálódhatnak külső szolgáltatásokkal. Jellemzően JavaScript, HTML és CSS nyelven íródnak, és egy ZIP-fájlként vannak csomagolva egy manifest fájllal, amely leírja a bővítmény metaadatait és engedélyeit.

A böngészőbővítmények népszerű felhasználási területei a következők:

• Hirdetésblokkolók: Eltávolítják a hirdetéseket a weboldalakról.
• Jelszókezelők: Biztonságosan tárolják és kezelik a jelszavakat.
• Termelékenységi eszközök: Javítják a munkafolyamatot olyan funkciókkal, mint a feladatkezelés és a jegyzetelés.
• Tartalom testreszabása: Módosítják a weboldalak megjelenését és viselkedését.
• Akadálymentesítési eszközök: Javítják a web akadálymentességét a fogyatékkal élő felhasználók számára.

Manifest V3: Az új szabvány

A Manifest V3 a böngészőbővítmény manifest fájljának legújabb verziója, egy JSON fájl, amely leírja a bővítmény metaadatait, engedélyeit és erőforrásait. Jelentős változásokat vezet be a bővítményfejlesztési folyamatba, elsősorban a jobb biztonságra, adatvédelemre és teljesítményre összpontosítva. A Manifest V3 legfontosabb változásai a következők:

• Service Workerek: A háttéroldalak helyettesítése service workerekkel a jobb teljesítmény és a csökkentett memóriafogyasztás érdekében. A service workerek eseményvezérelt szkriptek, amelyek a háttérben futnak, és olyan eseményeket kezelnek, mint a hálózati kérések és a riasztások.
• Declarative Net Request API: A blokkoló webRequest API helyettesítése a Declarative Net Request API-val a hálózati kérések szűrésére. Ez növeli az adatvédelmet és a biztonságot azáltal, hogy korlátozza a bővítmény hozzáférését a hálózati forgalomhoz.
• Content Security Policy (CSP): Szigorúbb CSP-irányelvek betartatása az önkényes kód futtatásának megakadályozása és a biztonsági kockázatok csökkentése érdekében.
• Manifest verzió: A manifest.json fájlban a manifest_version kulcsot 3-ra kell állítani.

Migráció Manifest V2-ről Manifest V3-ra

A Manifest V2-ről Manifest V3-ra történő migráció gondos tervezést és kódmódosításokat igényel. Íme egy lépésről lépésre szóló útmutató:

1. Frissítse a manifest fájlt: Állítsa a manifest_version-t 3-ra, és frissítse a permissions és background mezőket a Manifest V3 követelményeinek megfelelően.
2. Cserélje le a háttéroldalakat service workerekre: Írja át a háttérszkripteket service workerként, az eseményeket a chrome.scripting és chrome.alarms API-k segítségével kezelve.
3. Migráljon a Declarative Net Request API-ra: Cserélje le a blokkoló webRequest API hívásokat a declarativeNetRequest API-ban definiált deklaratív szabályokra.
4. Frissítse a tartalom biztonsági házirendjét: Igazítsa a content_security_policy mezőt a manifest fájlban a szigorúbb CSP követelményekhez.
5. Teszteljen alaposan: Tesztelje a bővítményt széles körben különböző böngészőkben a kompatibilitás és a megfelelő működés biztosítása érdekében.

Példa: Háttérszkript migrálása Service Worker-re

Manifest V2 (background.js):

            chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    return {cancel: true};
  },
  {urls: ["*.example.com/*"]},
  ["blocking"]
);

            

              
                Copy
              
            
          

Manifest V3 (service-worker.js):

            chrome.declarativeNetRequest.updateDynamicRules({
  removeRuleIds: [1],
  addRules: [{
    "id": 1,
    "priority": 1,
    "action": { "type": "block" },
    "condition": { "urlFilter": "*.example.com/*", "resourceTypes": ["main_frame", "sub_frame", "stylesheet", "script", "image", "object", "xmlhttprequest", "other"] }
  }]
});

            

              
                Copy
              
            
          

manifest.json (Manifest V3):

            {
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "A simple extension",
  "permissions": [
    "declarativeNetRequest",
    "declarativeNetRequestFeedback",
    "storage"
  ],
  "background": {
    "service_worker": "service-worker.js"
  },
  "declarative_net_request": {
    "rule_resources": [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }]
  }
}

            

              
                Copy
              
            
          

Alapvető JavaScript API-k böngészőbővítményekhez

A böngészőbővítmények egy sor JavaScript API-ra támaszkodnak a böngészővel és a weboldalakkal való interakcióhoz. Íme néhány a legfontosabb API-k közül:

1. chrome.runtime

A chrome.runtime API hozzáférést biztosít a bővítmény futásidejű környezetéhez. Lehetővé teszi a bővítmények számára, hogy kommunikáljanak a háttérszkripttel, hozzáférjenek a manifest fájlhoz, és kezeljék a bővítmény életciklusát.

Kulcsfontosságú metódusok:

• chrome.runtime.sendMessage(): Üzenetet küld a háttérszkriptnek vagy más bővítményeknek.
• chrome.runtime.onMessage.addListener(): Más szkriptektől érkező üzeneteket figyel.
• chrome.runtime.getManifest(): Visszaadja a bővítmény manifest fájlját JavaScript objektumként.
• chrome.runtime.reload(): Újratölti a bővítményt.

Példa: Üzenet küldése a Content Scriptből a Háttérszkriptbe

Content Script (content.js):

            chrome.runtime.sendMessage({message: "Hello from content script!"}, function(response) {
  console.log("Response from background script: ", response.message);
});

            

              
                Copy
              
            
          

Háttérszkript (service-worker.js):

            chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log("Message from content script: ", request.message);
    sendResponse({message: "Hello from background script!"});
  }
);

            

              
                Copy
              
            
          

2. chrome.storage

A chrome.storage API mechanizmust biztosít az adatok tárolására és lekérésére a bővítményen belül. Mind helyi, mind szinkronizált tárolási lehetőségeket kínál.

Kulcsfontosságú metódusok:

• chrome.storage.local.set(): Adatokat tárol helyileg.
• chrome.storage.local.get(): Adatokat kér le a helyi tárolóból.
• chrome.storage.sync.set(): Olyan adatokat tárol, amelyek szinkronizálódnak a felhasználó eszközei között.
• chrome.storage.sync.get(): Adatokat kér le a szinkronizált tárolóból.

Példa: Adatok tárolása és lekérése a helyi tárolóból

            // Adat tárolása
chrome.storage.local.set({key: "value"}, function() {
  console.log("Value is set to " + "value");
});

// Adat lekérése
chrome.storage.local.get(["key"], function(result) {
  console.log("Value currently is " + result.key);
});

            

              
                Copy
              
            
          

3. chrome.tabs

A chrome.tabs API lehetővé teszi a bővítmények számára, hogy interakcióba lépjenek a böngésző füljeivel. Metódusokat biztosít a fül létrehozásához, lekérdezéséhez, módosításához és bezárásához.

Kulcsfontosságú metódusok:

• chrome.tabs.create(): Új fület hoz létre.
• chrome.tabs.query(): Lekérdezi a meghatározott kritériumoknak megfelelő fül-eket.
• chrome.tabs.update(): Frissíti egy fül tulajdonságait.
• chrome.tabs.remove(): Bezár egy fület.
• chrome.tabs.executeScript(): JavaScript kódot futtat egy fülön.

Példa: Új fül létrehozása

            chrome.tabs.create({url: "https://www.example.com"}, function(tab) {
  console.log("New tab created with ID: " + tab.id);
});

            

              
                Copy
              
            
          

4. chrome.alarms

A chrome.alarms API lehetővé teszi a bővítmények számára, hogy feladatokat ütemezzenek egy adott időpontra vagy egy meghatározott időintervallum után. Ez különösen fontos a Manifest V3-ban, mivel helyettesíti az időzítők használatát a háttéroldalakon, amelyek már nem támogatottak.

Kulcsfontosságú metódusok:

• chrome.alarms.create(): Új riasztást hoz létre.
• chrome.alarms.get(): Lekér egy meglévő riasztást.
• chrome.alarms.clear(): Töröl egy riasztást.
• chrome.alarms.getAll(): Lekéri az összes riasztást.
• chrome.alarms.onAlarm.addListener(): Figyeli a riasztási eseményeket.

Példa: Riasztás létrehozása

            chrome.alarms.create("myAlarm", {delayInMinutes: 1, periodInMinutes: 1});

chrome.alarms.onAlarm.addListener(function(alarm) {
  if (alarm.name === "myAlarm") {
    console.log("Alarm triggered!");
  }
});

            

              
                Copy
              
            
          

5. chrome.scripting

A chrome.scripting API lehetővé teszi a bővítmények számára, hogy JavaScriptet és CSS-t injektáljanak a weboldalakba. Ez az API a Manifest V3 egyik kulcsfontosságú eleme, és a service workerek használják a weboldalakkal való interakcióhoz azok betöltődése után.

Kulcsfontosságú metódusok:

• chrome.scripting.executeScript(): JavaScript kódot futtat egy fülön vagy keretben.
• chrome.scripting.insertCSS(): CSS-t szúr be egy fülbe vagy keretbe.

Példa: JavaScript injektálása egy fülbe

            chrome.scripting.executeScript({
  target: {tabId: tabId},
  function: function() {
    console.log("Injected script!");
    document.body.style.backgroundColor = 'red';
  }
});

            

              
                Copy
              
            
          

6. chrome.notifications

A chrome.notifications API lehetővé teszi a bővítmények számára, hogy értesítéseket jelenítsenek meg a felhasználónak. Ez hasznos frissítések, riasztások és egyéb fontos információk közlésére.

Kulcsfontosságú metódusok:

• chrome.notifications.create(): Új értesítést hoz létre.
• chrome.notifications.update(): Frissít egy meglévő értesítést.
• chrome.notifications.clear(): Töröl egy értesítést.
• chrome.notifications.getAll(): Lekéri az összes értesítést.

Példa: Értesítés létrehozása

            chrome.notifications.create('myNotification', {
  type: 'basic',
  iconUrl: 'icon.png',
  title: 'My Extension',
  message: 'Hello from my extension!'
}, function(notificationId) {
  console.log('Notification created with ID: ' + notificationId);
});

            

              
                Copy
              
            
          

7. chrome.contextMenus

A chrome.contextMenus API lehetővé teszi a bővítmények számára, hogy elemeket adjanak a böngésző helyi menüjéhez (jobb kattintásos menü). Ez kényelmes módot biztosít a felhasználók számára, hogy közvetlenül a weboldalakról érjék el a bővítmény funkcióit.

Kulcsfontosságú metódusok:

• chrome.contextMenus.create(): Új helyi menü elemet hoz létre.
• chrome.contextMenus.update(): Frissít egy meglévő helyi menü elemet.
• chrome.contextMenus.remove(): Eltávolít egy helyi menü elemet.
• chrome.contextMenus.removeAll(): Eltávolítja a bővítmény által létrehozott összes helyi menü elemet.

Példa: Helyi menü elem létrehozása

            chrome.contextMenus.create({
  id: "myContextMenuItem",
  title: "My Context Menu Item",
  contexts: ["page", "selection"]
}, function() {
  console.log("Context menu item created.");
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
  if (info.menuItemId === "myContextMenuItem") {
    console.log("Context menu item clicked!");
    alert("You clicked the context menu item!");
  }
});

            

              
                Copy
              
            
          

8. chrome.i18n

A chrome.i18n API a bővítmény nemzetközivé tételére szolgál, hogy különböző nyelveken és régiókban élő felhasználók számára is elérhető legyen. Lehetővé teszi, hogy a bővítmény felhasználói felületének és üzeneteinek lokalizált verzióit biztosítsa.

Kulcsfontosságú metódusok:

• chrome.i18n.getMessage(): Lekér egy lokalizált karakterláncot a bővítmény _locales könyvtárából.

Példa: a chrome.i18n használata lokalizációra

Először hozzon létre egy _locales könyvtárat a bővítmény gyökérmappájában. Ebben hozzon létre nyelvspecifikus mappákat, mint például en, es, fr stb.

Minden nyelvmappán belül hozzon létre egy messages.json fájlt. Például a _locales/en/messages.json fájlban:

            {
  "extensionName": {
    "message": "My Extension",
    "description": "The name of the extension."
  },
  "greetingMessage": {
    "message": "Hello, world!",
    "description": "A simple greeting message."
  }
}

            

              
                Copy
              
            
          

Ezután a JavaScript kódjában:

            let extensionName = chrome.i18n.getMessage("extensionName");
let greeting = chrome.i18n.getMessage("greetingMessage");
console.log(extensionName); // Kimenet: My Extension
console.log(greeting);      // Kimenet: Hello, world!

            

              
                Copy
              
            
          

Böngészők közötti kompatibilitás

Bár a Chrome a legnépszerűbb böngésző a bővítményfejlesztéshez, fontos figyelembe venni a böngészők közötti kompatibilitást. A Firefox, a Safari és más böngészők is támogatják a bővítményeket, de az API-jaik és manifest formátumaik kissé eltérhetnek.

A böngészők közötti kompatibilitás biztosítása érdekében:

• Használja a WebExtensions API-t: A WebExtensions API egy szabványosított API a böngészőbővítmények fejlesztéséhez, amelyet több böngésző is támogat.
• Teszteljen különböző böngészőkben: Tesztelje a bővítményt különböző böngészőkben a kompatibilitási problémák azonosítása és javítása érdekében.
• Használjon polyfilleket: Használjon polyfilleket a hiányzó API funkcionalitás pótlására a különböző böngészőkben.
• Feltételes kód: Használjon feltételes kódot a böngészőspecifikus különbségekhez való alkalmazkodáshoz. Például: if (typeof browser === "undefined") { var browser = chrome; }

Bevált gyakorlatok a böngészőbővítmények fejlesztéséhez

Íme néhány bevált gyakorlat, amelyet érdemes követni a böngészőbővítmények fejlesztése során:

• Minimalizálja az engedélyeket: Csak azokat az engedélyeket kérje, amelyekre a bővítményének feltétlenül szüksége van. Ez növeli a felhasználói adatvédelmet és biztonságot.
• Alkalmazzon biztonságos kódolási gyakorlatokat: Kövesse a biztonságos kódolási gyakorlatokat a sebezhetőségek, például a cross-site scripting (XSS) és a kódinjektálás megelőzése érdekében.
• Optimalizálja a teljesítményt: Optimalizálja a bővítmény teljesítményét, hogy minimalizálja a böngésző teljesítményére gyakorolt hatását.
• Biztosítson világos és tömör dokumentációt: Biztosítson világos és tömör dokumentációt, hogy segítse a felhasználókat a bővítmény használatának megértésében.
• Kezelje a hibákat elegánsan: Implementáljon hibakezelést, hogy megakadályozza a bővítmény összeomlását vagy váratlan viselkedését.
• Tartsa naprakészen a bővítményt: Rendszeresen frissítse a bővítményt a hibák, biztonsági sebezhetőségek és kompatibilitási problémák kezelése érdekében.
• Vegye figyelembe a nemzetköziesítést (i18n): Tervezze meg a bővítményt úgy, hogy könnyen lokalizálható legyen különböző nyelvekre. Használja a chrome.i18n API-t.
• Tartsa tiszteletben a felhasználói adatvédelmet: Legyen átlátható abban, hogy a bővítmény hogyan gyűjti és használja a felhasználói adatokat, és szükség esetén kérje a felhasználó beleegyezését. Tartsa be a vonatkozó adatvédelmi szabályozásokat, mint a GDPR és a CCPA.

A bővítmény beküldése az áruházakba

Miután a bővítményt kifejlesztette és letesztelte, érdemes beküldeni a böngészőbővítmény-áruházakba, hogy elérhetővé tegye a felhasználók számára. Minden böngészőnek saját áruháza és beküldési folyamata van:

• Chrome Web Store: Küldje be a bővítményt a Chrome Web Store-ba a Chrome felhasználók számára. A folyamat magában foglalja egy fejlesztői fiók létrehozását, a bővítmény csomagolását és feltöltését az áruházba.
• Firefox Add-ons: Küldje be a bővítményt a Firefox Add-ons-ba a Firefox felhasználók számára. A folyamat hasonló a Chrome Web Store-hoz, és magában foglalja egy fejlesztői fiók létrehozását és a bővítmény felülvizsgálatra történő beküldését.
• Safari Extensions Gallery: Küldje be a bővítményt a Safari Extensions Gallery-be a Safari felhasználók számára. A folyamat magában foglalja egy fejlesztői tanúsítvány beszerzését az Apple-től és a bővítmény felülvizsgálatra történő beküldését.

A bővítmény beküldésekor ügyeljen arra, hogy pontos és teljes körű információkat adjon meg, beleértve a leíró címet, a részletes leírást, a képernyőképeket és az adatvédelmi irányelveket. A bővítményáruházak felülvizsgálják a beküldéseket, hogy megbizonyosodjanak arról, hogy azok megfelelnek az irányelveiknek és útmutatásaiknak.

Következtetés

A böngészőbővítmények fejlesztése a Manifest V3-mal és a JavaScript API-kkal hatékony módot kínál a böngészési élmény testreszabására és javítására. Az alapvető koncepciók megértésével, a bevált gyakorlatok követésével és a böngészők közötti kompatibilitás figyelembevételével a fejlesztők értékes és vonzó bővítményeket hozhatnak létre a felhasználók számára világszerte. Ahogy a web fejlődik, a böngészőbővítmények továbbra is létfontosságú szerepet játszanak majd az internet jövőjének alakításában.

Ne feledje, hogy a bővítmények fejlesztése során mindig a felhasználói adatvédelmet és biztonságot helyezze előtérbe. Ezen elvek szem előtt tartásával olyan bővítményeket hozhat létre, amelyek egyszerre hasznosak és megbízhatóak.

Ez az útmutató szilárd alapot nyújt a böngészőbővítmény-fejlesztés elkezdéséhez. Ahogy mélyebbre merül a témában, fedezze fel a rendelkezésre álló különféle API-kat és funkciókat, és kísérletezzen különböző technikákkal innovatív és hatásos bővítmények létrehozásához.